<template>
    <div class="dashboard-left">
        <!-- 左侧区域 -->
        <BorderBox8 class="border-box">
            <div ref="chart" style="width: 100%; height: 100%;"></div>
        </BorderBox8>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import { BorderBox8 } from '@kjgl77/datav-vue3'

const chart = ref(null)

onMounted(() => {
  const myChart = echarts.init(chart.value)

  const data = [
    { name: "餐饮业信息", value: 10, color: '#FF5733' },
    { name: "零售信息", value: 5, color: '#33FF57' },
    { name: "休闲和娱乐信息", value: 6, color: '#3357FF' },
    { name: "教育培训信息", value: 4, color: '#FF33A1' },
    { name: "运动健身", value: 2, color: '#FF8F33' },
    { name: "生活服务信息", value: 3, color: '#33FFF5' },
    { name: "金融保险信息", value: 1, color: '#8F33FF' },
    { name: "健康服务信息", value: 4, color: '#FF3333' },
    { name: "车务服务信息", value: 4, color: '#33FF8F' },
  ]

  const option = {
    title: {
      text: '周边500m 范围内行业数量统计',
      textStyle: {
        color: '#FFFFFF'
      },
      left: 'center'
    },
    tooltip: {},
    grid: {
      left: '20%',  // 增加左侧空间
      right: '10%', // 增加右侧空间
      bottom: '10%', // 增加底部空间
    },
    yAxis: {
      data: data.map(item => item.name),
      axisLabel: {
        color: '#FFFFFF'
      }
    },
    xAxis: {
      axisLabel: {
        color: '#FFFFFF'
      }
    },
    series: [
      {
        type: 'bar',
        data: data.map(item => item.value),
        itemStyle: {
          color: function(params) {
            return data[params.dataIndex].color
          }
        },
        label: {
          show: true,
          position: 'right',
          color: '#FFFFFF'
        },
        encode: {
          x: 'value',
          y: 'name'
        }
      }
    ]
  }

  myChart.setOption(option)
})
</script>

<style scoped>
.dashboard-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 均匀分布 */
  height: 100%;
  margin-right: 10px;
}

.border-box {
  width: 100%; /* 设置宽度 */
  height: 100%; /* 设置高度 */
  box-sizing: border-box; /* 确保内边距包含在元素的尺寸内 */
  font-size: 25px;
  color: white;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  padding: 10px;
}
</style>


